// 准备数据
let data = [
    {
      url: "./img/001.jpg",
      title: "001"
    },
    {
      url: "./img/002.jpg",
      title: "002"
    },
    {
      url: "./img/003.jpg",
      title: "003"
    },
    {
      url: "./img/004.jpg",
      title: "004"
    },
    {
      url: "./img/005.jpg",
      title: "005"
    },
    {
      url: "./img/006.jpg",
      title: "006"
    }
  ]
  
  let ul = document.querySelector(".container ul")
  
  // 动态添加图片
  data.forEach((item, index) => {
    let li = document.createElement("li")
    let img = document.createElement("img")
    // 蒙层
    // 添加图片路径
    img.src = item.url
  
    ul.appendChild(li)
    li.appendChild(img)
  })
  
  let ol = document.querySelector(".container ol")
  // 动态给ol添加宽度
  ol.style.width = data.length * 20 + "px"
  
  // 动态添加点
  data.forEach((item, index) => {
    let li = document.createElement("li")
    ol.appendChild(li)
  })
  
  let lis = document.querySelectorAll(".container ul li")
  let point = document.querySelectorAll(".container ol li")
  
  point[0].className = "active"
  
  let imgWidth = lis[0].offsetWidth
  
  // 动态添加宽度
  ul.style.width = imgWidth * data.length + "px"
  // 初始化外边距
  ul.style.marginLeft = 0
  
  // 排他原点函数
  function clearPoint() {
    point.forEach(item => {
      item.className = ""
    })
  }
  
  let i = 0
  
  ul.appendChild(lis[0].cloneNode(true))
  
  
  let time = timer()
  function timer() {
    return setInterval(() => {
      // 最开始就是第0位，所以动画从第一位开始算
      i++
      walk(ul, -(imgWidth * i), () => {
        clearPoint()
        if (i == point.length) {
          i = 0
        }
        point[i].className = "active"
      })
    }, 3000)
  }
  
  // 点与图片对应
  point.forEach((item, index) => {
    item.addEventListener("touchstart", function () {
      walk(ul, -(lis[index].offsetWidth * index), () => {
        clearPoint()
        point[index].className = "active"
        i = index
      })
    })
  })
  
  // 记录开始和结束位置
  let startP, endP;
  
  // 记录当前的marginLeft值(不加px)
  let marginLeft;
  
  ul.addEventListener("touchstart", function (e) {
    marginLeft = Number(ul.style.marginLeft.split("px")[0])
  
    startP = e.targetTouches[0].pageX
  
    clearInterval(time)
    time = null
  })
  
  ul.addEventListener("touchmove", function (e) {
  
    endP = e.targetTouches[0].pageX
  
    // 如果最开始就向左滑，那么直接等于拷贝的第一张图的位置
    if (endP > startP) {
      if (marginLeft === 0) {
        ul.style.marginLeft = -ul.offsetWidth + "px"
        // 改变之后在更新margin
        marginLeft = Number(ul.style.marginLeft.split("px")[0])
      }
    }
  
    // 使图片可以拖动
    ul.style.marginLeft = marginLeft + endP - startP + "px"
  })
  
  
  ul.addEventListener("touchend", function () {
    // 必须划过三分之一才给做动画
    if (Math.abs(startP - endP) > imgWidth / 3) {
      // 说明向左滑
      if (startP > endP) {
        i++
        walk(this, -(i * imgWidth), () => {
          clearPoint()
          if (i == point.length) {
            i = 0
          }
          point[i].className = "active"
  
          time = timer()
        })
        // 说明向右滑
      } else {
        i--
        if (i == -1) {
          i = point.length - 1
        }
        walk(this, -(i * imgWidth), () => {
          clearPoint()
          point[i].className = "active"
  
          time = timer()
        })
      }
    } else {
      walk(this, marginLeft, () => {
        console.log("拖动的距离不够, 会弹回来");
  
        time = timer()
      })
    }
  })